<template>
	<div>
		<h5></h5>
		<group>
			<x-input placeholder='Accc' v-model='accc'>
				
			</x-input>
			<div style="height: 30px;"></div>
			<!-- 在组件中执行@click事件，需要添加事件修饰符 .native[监听原生事件] -->
			<x-button type='primary' @click.native='dologin'>
				登录
			</x-button>
		</group>
	</div>
</template>

<script>
	import {
		Group,
		XInput,
		XButton
	} from 'vux';
	import {mapMutations} from 'vuex'
	export default {
		components: {
			Group,
			XInput,
			XButton,
			mapMutations
		},
		data:function(){
			return{
				accc:'',//双向绑定的值
			}
		},
		methods:{
			...mapMutations(['mutationlogin','mutationloginname','mutationtoken','mutationAuthor']),
			// 登录触发的事件
			dologin:function(){
				var athis=this;
				//发送ajax
				this.$http.post('/accesstoken',{
					accesstoken:this.accc
				}).then(function(res){
					if(res.data.success){
						//1 修改登录状态
						athis.mutationlogin(true);
						athis.mutationloginname(res.data.loginname);
						athis.mutationtoken(athis.accc);
						athis.mutationAuthor(res.data.id)

						//2 实现持久化本地存储 localstorage
							//2.1登录状态
							window.localStorage.setItem('loginstatus',true);
							//2.2用户名
							window.localStorage.setItem('loginname',res.data.loginname)
							//2.3 acc token
							window.localStorage.setItem('accesstoken',athis.accc);
							//用户名
							window.localStorage.setItem('author',res.data.id);
							
						//2 跳转页面
						athis.$router.push('/user/'+res.data.loginname);
					}
					
					
					
				})
			}
		}
	}
</script>

<style>
</style>
